<style lang="scss">
  .ui-page {
    padding-bottom: 20px;

    .ui-detail-box {
      .ui-detail-btus {
        // text-align: right;
      }
    }
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>宿舍学生情况</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <el-table :data="studentList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="stuNo" label="学号"></el-table-column>
        <el-table-column prop="stuName" label="学生姓名"></el-table-column>
        <el-table-column prop="stuAge" label="年龄"></el-table-column>
        <el-table-column prop="stuSex" label="性别">
          <template v-if="scope.row.stuSex!=null" slot-scope="scope">
            <span v-if="scope.row.stuSex=='MAN'">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="stuMajor" label="专业"></el-table-column>
        <el-table-column prop="stuPhone" label="手机"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteStu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>宿舍管理员情况</div>
      </div>
      <el-table :data="adminList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="adminNo" label="管理员工号"></el-table-column>
        <el-table-column prop="adminName" label="姓名"></el-table-column>
        <el-table-column prop="adminAge" label="年龄"></el-table-column>
        <el-table-column prop="adminSex" label="性别">
          <template v-if="scope.row.adminSex!=null" slot-scope="scope">
            <span v-if="scope.row.adminSex=='MAN'">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="adminPosition" label="职位"></el-table-column>
        <el-table-column prop="adminPhone" label="手机"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteAdmin(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'dormitoryDetail',
    data() {
      return {
        userId: this.$route.query.id,
        dorId: this.$route.query.dorId,
        editFlag: true,
        studentList: [],
        studentItem:{},
        adminList: [],
        exportList: [],
        tabLoading: false,//请求没有返回的时候，loading转圈
      }
    },
    created() {
      this.getStudent();
      this.getAdmin();
    },
    methods: {
      back() {
        console.log(this.$route);
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
      },
      isAdmin() {
        let userInfo = this.$getGlobal.getItem('userInfo');
        console.log(userInfo);
        if (userInfo.roleId !== '1' && userInfo.roleId !== "2") {
          this.$confirm('此操作仅限超级管理员使用,普通用户请前去个人中心修改密码', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      },
      getStudent() {
        post('/pms_api/student/list', {'dorId': this.dorId}).then(res => {
          this.studentList = res.data;
        }).catch(err => {
          this.tabLoading = false;
          console.log(err)
        })
      },
      deleteStu(item) {
        post('/pms_api/student/edit', {'userId': item.userId, "dorId": '0'}).then(res => {
          this.getStudent()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      getAdmin() {
        post('/pms_api/admin/list', {'dorId': this.dorId}).then(res => {
          this.adminList = res.data;
          // this.total = res.totalPages
          console.log(res.data);
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false;
          console.log(err)
        })
      },
      deleteAdmin(item) {
        post('/pms_api/admin/edit', {'userId': item.userId, "dorId": '0'}).then(res => {
          this.getAdmin()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportList = val
      },
      exportExcel() {
        let sexName = {1: '男', 2: '女'};
        if (this.exportList.length > 0) {
          this.exportList.forEach(item => {
            item.sexName = sexName[item.sex]
          });
          const tHeader = ['ID', '用户id', '用户名', '性别', '年龄', '邮箱', '手机号', '创建时间', '修改时间', '状态', '说明', '密钥'];
          const filterVal = ['id', 'userId', 'username', 'sexname', 'age', 'email', 'phone', 'createTime', 'updateTime', 'status', 'description', 'salt'];
          const list = this.exportList;
          this.$getGlobal.exportFun('用户列表', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
